<template>
  <div class="container">
    <div class="nav-bar flex">
        <router-link tag="div" :to="'/yh'">优惠券</router-link>
        <div class="active">
            电子券
        </div>
    </div>
    <div class="nav-bar-before"></div>    
    <div class="hr40"></div>
    <div class="hr20"></div>
    <xd-datalist ref="datalist" url="/api/getETicketsList" :pagination="false">
      <template slot-scope="scope">
            <router-link tag="div" :to="'/dzjdetail?cardId='+item[0][1]" class="list-item" 
            :class="'list-item'+(index%3) + ' ' + (item[4][1]!=0?'disabled':'')" v-for="(item,index) in scope.list" :key="index">
          <div class="title">
              {{item[1][1]}}
              <!-- <span class="man-money">300</span> -->
              <!-- 立减<span class="reduce-money">{{item[6][1]}} -->
                <!-- </span>         -->
          </div>
          <div class="desc" v-if="item[4]">
              状态：{{item[4][1]|status}}
          </div>
          <!-- <div class="desc">
              使用油站：中油BP油站
          </div>
          <div class="desc">
              使用条件：只限个人使用不能转载
          </div> -->
          <div class="valid-time" v-if="item[10]">
              有效时间：{{item[10][1]|parseTimeStr}}-{{item[11][1]|parseTimeStr}}
          </div>
          <div class="qrcodediv" @click.stop="doShowQrcode(item)"></div>
        </router-link>
      </template>
    </xd-datalist>
    
    <div class="masker" v-if="showQrcode && qrcodeData" @click="showQrcode=false"> 
      <div class="qrcodedialog" @click.stop="noop">
        <img :src="qrcodeData" alt="" class="qrcode-img">
      </div>
    </div>
  </div>

</template>
<style scoped lang="scss">
@import "../../styles/nav";

.masker {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 200;
}
.qrcodediv {
  position: absolute;
  right: 0;
  top: 0;
  height: 3.1rem;
  width: 2.4rem;
}
.list-item {
  position: relative;
}
html,
body,
.container {
  background-color: #ebebeb;
}
.hr40 {
  height: 0.4667rem;
}
.list-item {
  padding-top: 0.3rem;
  padding-left: 0.52rem;
  box-sizing: border-box;
  margin: 0 auto;
  .valid-time {
    color: #bbbbbb;
    font-size: 0.2667rem;
    width: 5.6533rem;
    padding-top: 0.2rem;
    padding-bottom: 0.3333rem;
    border-top: 0.0267rem dashed #bbb;
    margin-top: 0.16rem;
  }
  margin-top: -0.2667rem;
  .desc {
    font-size: 0.2933rem;
    color: #bbbbbb;
    line-height: 0.4rem;
  }
}
.hr20 {
  height: 0.2667rem;
}
.qrcode-img {
  position: fixed;
  width: 6rem;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.title {
  font-size: 0.4267rem;
  color: #222222;
  line-height: 1.6em;
  overflow: hidden;

  text-overflow: ellipsis;
  width: 6.3rem;
  height: 1.25rem;
  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  padding-bottom: 0.15rem;
  .man-money {
    font-size: 0.5067rem;
    color: #007f00;
  }
  .reduce-money {
    color: #e81b25;
    font-size: 0.5067rem;
  }
}
.list-item {
  //   697 × 285
  width: 9.2933rem;
  height: 3.8rem;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list-item0 {
  background-image: url("../../assets/icons/dzj/dzj1@2x.png");
}
.list-item1 {
  background-image: url("../../assets/icons/dzj/dzj2@2x.png");
}
.list-item2 {
  background-image: url("../../assets/icons/dzj/dzj3@2x.png");
}
.disabled {
  background-image: url("../../assets/icons/dzj/dzj0@2x.png");
  .title {
    color: #9f9f9f;
  }
  .desc {
    color: #bbbbbb;
  }
}
</style>
<script>
import QRCode from "qrcode";
export default {
  data() {
    return {
      showQrcode: false,
      qrcodeData: "",
      list: []
    };
  },
  filters: {
    parseTimeStr(str){
      return str.substr(0,4)+'.'+str.substr(4,2)+'.'+str.substr(6,2);
    },
    status(s) {
      let arr = ["未使用", "使用中", "已使用", "已作废", "已删除", "已失效"];
      return arr[parseInt(s)];
    }
  },
  methods: {
    doShowQrcode(item) {
      if (item[4][1] != 0) {
        this.$toast('电子券已使用');
        return;
      }
      this.showQrcode = true;
      let cardId = item[0][1];
      if (cardId) {
        QRCode.toDataURL(cardId, (err, url) => {
          this.qrcodeData = url;
        });
      }
    }
  }
};
</script>

